---
type: tutorial
title: Füge dynamische Inhalte über dich hinzu
description: |-
  Tutorial: Erstelle deinen ersten Astro-Blog –
  Verwende Variablen und bedingtes Rendern auf deinen Astro-Seiten
i18nReady: true
---

import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Jetzt, da du eine mehrseitige Website mit HTML-Inhalten hast, ist es an der Zeit, etwas dynamisches HTML hinzuzufügen!

<PreCheck>
  - deinen Seitentitel im Frontmatter zu definieren und ihn in deinem HTML zu verwenden
  - HTML-Elemente abhängig von Bedingungen anzuzeigen
  - einige Informationen über dich hinzuzufügen
</PreCheck>

Jede HTML-Datei ist gültige Astro-Syntax. Aber mit Astro kannst du mehr machen als nur reguläres HTML!

## Eine Variable definieren und verwenden

Öffne `about.astro`. Sie sollte so aussehen:

```astro title="src/pages/about.astro"
---
---
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">Startseite</a>
    <a href="/about/">Über mich</a>
    <a href="/blog/">Blog</a>
    <h1>Über mich</h1>
    <h2>… und meine neue Astro-Seite!</h2>

    <p>Ich arbeite mich gerade durch Astros Einsteiger-Tutorial. Das ist die zweite Seite auf meiner Website – und die erste, die ich selbst gebaut habe!</p>

    <p>Diese Website wird sich weiterentwickeln, während ich das Tutorial abschließe. Schau also regelmäßig vorbei und verfolge, wie meine Reise voranschreitet!</p>
  </body>
</html>
```

<Steps>
1. Füge folgende JavaScript-Zeile im Frontmatter-Skript zwischen die **Code-Begrenzungen** ein:

    ```astro title="src/pages/about.astro" ins={2}
    ---
    const pageTitle = "Über mich";
    ---
    ```

2. Ersetze sowohl den statischen „Astro“-Titel als auch die „Über mich“-Überschrift in deinem HTML durch die dynamische Variable `{pageTitle}`.

    ```astro title="src/pages/about.astro" del={5,12} ins={6,13}
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
        <title>{pageTitle}</title>
      </head>
      <body>
        <a href="/">Startseite</a>
        <a href="/about/">Über mich</a>
        <a href="/blog/">Blog</a>
        <h1>Über mich</h1>
        <h1>{pageTitle}</h1>
        <h2>… und meine neue Astro-Website!</h2>

        <p>Ich arbeite gerade das Astro-Einführungstutorial durch. Das ist die zweite Seite meiner Website und die erste, die ich selbst gebaut habe!</p>

        <p>Diese Website wird sich weiterentwickeln, während ich das Tutorial abschließe. Schau also regelmäßig vorbei und verfolge, wie meine Reise voranschreitet!</p>
      </body>
    </html>
    ```

3. Aktualisiere die Live-Vorschau deiner `/about`-Seite.

    Der Seitentext sollte gleich aussehen, aber der Seitentitel im Browsertab sollte jetzt „Über mich“ statt „Astro“ anzeigen.

    Anstatt Text direkt in HTML-Tags zu schreiben, hast du gerade **eine Variable definiert und verwendet** – in den beiden Bereichen deiner `.astro`-Datei.

4. Verwende dasselbe Muster, um in `index.astro` („Startseite“) und `blog.astro` („Mein Astro-Lernblog“) eine `pageTitle`-Variable anzulegen. Aktualisiere das HTML auf diesen Seiten so, dass der Seitentitel mit der Überschrift übereinstimmt.
</Steps>

:::note[Wichtige Punkte]
1. **Definiere** Variablen im Astro-Skript mit JavaScript- oder TypeScript-Ausdrücken.  
2. **Verwende** diese Variablen im Astro-Template in geschweiften Klammern `{ }`, um Astro mitzuteilen, dass du JavaScript nutzt.
:::

## JavaScript-Ausdrücke in Astro schreiben

<Steps>
1. Füge folgendes JavaScript in dein Frontmatter ein – zwischen die **Code-Begrenzungen**:

   (Du kannst den Code anpassen, aber dieses Tutorial nutzt folgendes Beispiel.)

    ```astro title="src/pages/about.astro" ins={4-9, 11}
    ---
    const pageTitle = "Über mich";

    const identity = {
      firstName: "Sarah",
      country: "Kanada",
      occupation: "Technische Redakteurin",
      hobbies: ["Fotografie", "Vogelbeobachtung", "Baseball"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Dokumentation schreiben"];
    ---
    ```

2. Füge den folgenden Code unter deinem bisherigen Inhalt in dein HTML-Template ein:

    ```astro title="src/pages/about.astro"
    <p>Hier sind ein paar Fakten über mich:</p>
    <ul>
      <li>Mein Name ist {identity.firstName}.</li>
      <li>Ich lebe in {identity.country} und arbeite als {identity.occupation}.</li>
      {identity.hobbies.length >= 2 && 
        <li>Zwei meiner Hobbys sind: {identity.hobbies[0]} und {identity.hobbies[1]}</li>
      } 
    </ul>
    <p>Meine Fähigkeiten sind:</p>
    <ul>
      {skills.map((skill) => <li>{skill}</li>)}
    </ul>
    ```
</Steps>

:::note[Kerngedanke]
1. Ein Astro-Template zu schreiben ist fast wie **HTML zu schreiben**, aber du kannst JavaScript-Ausdrücke darin einfügen.  
2. Das Frontmatter-Skript in Astro enthält nur JavaScript.  
3. Du kannst alle modernen JavaScript-**Operatoren**, **Ausdrücke** und **Funktionen** in beiden Bereichen deiner `.astro`-Datei verwenden – aber geschweifte Klammern sind (nur) im HTML-Template nötig.
:::

<Box icon="question-mark">

### Teste dein Wissen

1. Das Frontmatter einer `.astro`-Datei ist geschrieben in:

    <MultipleChoice>
        <Option>HTML</Option>
        <Option>YAML</Option>
        <Option isCorrect>JavaScript</Option>
    </MultipleChoice>

2. Zusätzlich zu HTML erlaubt dir die Astro-Syntax, Folgendes einzubinden:

    <MultipleChoice>
        <Option isCorrect>JavaScript-Operatoren, -Ausdrücke und -Funktionen</Option>
        <Option>YAML</Option>
        <Option>Markdown</Option>
    </MultipleChoice>

3. Wann musst du dein JavaScript in geschweifte Klammern schreiben?
    <MultipleChoice>
        <Option>Wenn du dir nicht sicher bist, ob es korrekt ist.</Option>
        <Option isCorrect>Wenn du dich im HTML-Template-Abschnitt einer Astro-Komponente befindest.</Option>
        <Option>Zwischen den Code-Begrenzungen einer Astro-Komponente.</Option>
    </MultipleChoice>
</Box>

## Elemente bedingt rendern

Du kannst deine Skriptvariablen auch nutzen, um zu entscheiden, **ob** bestimmte HTML-Elemente im `<body>` angezeigt werden oder nicht.

<Steps>
1. Füge die folgenden Zeilen zu deinem Frontmatter-Skript hinzu, um **Variablen zu definieren**:

    ```astro title="src/pages/about.astro" ins={13-15}
    ---
    const pageTitle = "Über mich";

    const identity = {
      firstName: "Sarah",
      country: "Kanada",
      occupation: "Technische Redakteurin",
      hobbies: ["Fotografie", "Vogelbeobachtung", "Baseball"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Dokumentation schreiben"];

    const happy = true;
    const finished = false;
    const goal = 3;
    ---
    ```

2. Füge folgende Zeilen unter deinen bisherigen Absätzen hinzu.

    Überprüfe dann die Live-Vorschau im Browser, um zu sehen, was angezeigt wird:

    ```astro title="src/pages/about.astro" /:|&&/ "?"
    {happy && <p>Ich freue mich, Astro zu lernen!</p>}

    {finished && <p>Ich habe dieses Tutorial abgeschlossen!</p>}

    {goal === 3 ? <p>Mein Ziel ist es, in 3 Tagen fertig zu werden.</p> : <p>Mein Ziel sind nicht 3 Tage.</p>}
    ```

3. Committe deine Änderungen auf GitHub, bevor du weitermachst.  
    Mach das immer, wenn du deinen Fortschritt speichern und deine Live-Website aktualisieren möchtest.
</Steps>

:::tip
Die Template-Syntax von Astro ist ähnlich wie die von JSX. Wenn du dir also unsicher bist, wie du dein Skript im HTML verwenden kannst, hilft eine Suche danach, wie es in JSX gemacht wird, oft weiter!
:::

<Box icon="question-mark">

### Analysiere das Muster

Angenommen, dein `.astro`-Skript sieht so aus:

```astro title="src/pages/about.astro"
---
const operatingSystem = "Linux";
const quantity = 3;
const footwear = "Stiefel";
const student = false;
---
```

Kannst du vorhersagen, welches HTML (falls überhaupt) an den Browser gesendet wird?  
Klicke, um herauszufinden, ob du richtig liegst!

1. `<p>{operatingSystem}</p>`

    <p>
      <Spoiler>`<p>Linux</p>`</Spoiler>
    </p>

2. `{student && <p>Ich bin noch in der Schule.</p>}`

    <p>
      <Spoiler>Nichts wird angezeigt, da `student` als false ausgewertet wird.</Spoiler>
    </p>

3. `<p>Ich habe {quantity + 8} Paar {footwear}</p>`

    <p>
      <Spoiler>`<p>Ich habe 11 Paar Stiefel</p>`</Spoiler>
    </p>

4. `{operatingSystem === "macOS" ? <p>Ich benutze einen Mac.</p> : <p>Ich benutze keinen Mac.</p>}`

    <p>
      <Spoiler>`<p>Ich benutze keinen Mac.</p>`</Spoiler>
    </p>
</Box>

<Box icon="check-list">
## Checkliste

<Checklist>
- [ ] Ich kann Werte in `.astro`-Dateien definieren und verwenden.  
- [ ] Ich kann HTML-Elemente bedingt rendern.
</Checklist>
</Box>

### Ressourcen

- [Dynamische Ausdrücke in Astro](/de/reference/astro-syntax/#jsx-ähnliche-ausdrücke)
